<template>
  <div>
    <div class="formBox marT15">
      <div
        class="formItem flexLeft"
        :class="{ borB: k != formData.length - 1 }"
        v-for="(i, k) in formData"
        :key="k"
      >
        <div class="formItemName fontS16">
          {{ i.title }}
          <slot :name="`formHead_${k}`"></slot>
        </div>

        <div class="marL30 flex1" v-if="i.type">
          <input
            v-if="i.type === 'input'"
            type="text"
            style="width: 100%"
            :placeholder="i.pld"
            :disabled="iptDis"
            v-model="declare[i.ajaxStr]"
            @change="changeInput(i)"
          />
          <a-radio-group
            v-if="i.type === 'radio'"
            style="width: 100%"
            :options="i.radioOptions"
            v-model="declare[i.ajaxStr]"
            :disabled="iptDis"

            @change="changeRadio(i,declare[i.ajaxStr])"
          />
          <a-checkbox-group
            v-if="i.type === 'checkbox'"
            :options="i.checkOptions"
            v-model="declare[i.ajaxStr]"
            :disabled="iptDis"
            @change="onChange"
          />
        </div>
        <slot :name="`formRight_${k}`"></slot>
      </div>
      <slot name="item"></slot>
    </div>
    
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    formData: {
      type: Array,
      default: () => [],
    },
    
  },
  computed: {
    ...mapState({
      declare: (state) => state.declare,
      iptDis: (state) => state.iptDis,
    }),
  },
  methods: {
    onChange(checkedValues) {
      this.declare.domain = checkedValues.toString();
      console.log("declare = ", this.declare);
    },
    // 
    filterSymbol(i){
      if(i){
        // 匹配正则，将所有的分隔符转换为中文逗号
        var reg = /[,|、]/g
        var realMsg = i.replace(reg,'，')
        this.declare.doneUsers = realMsg
        // 判断当前奖项等级
        var arr = realMsg.split("，")
        let arr_length = arr.length
        switch(this.declare.grade){
          case "1":
            // 一等奖不超过10人
            if(arr_length>10){
              this.$message.error('一等奖不超过10人,请重新填写');
              this.declare.doneUsers = ""
            }
            
            break;
          case "2":
            // 二等奖不超过8人
            if(arr_length>8){
              this.$message.error('二等奖不超过8人,请重新填写');
              this.declare.doneUsers = ""
            }
            
            break;
          case "3":
            // 二等奖不超过6人
            if(arr_length>6){
              this.$message.error('三等奖不超过6人,请重新填写');
              this.declare.doneUsers = ""
            }
            break;
          default:
            this.$message.error('未知的奖项等级');
            this.declare.doneUsers = ""
        }
        
      }
    },
    changeInput(i){
      // 对主要完成人进行格式化
      switch(i.ajaxStr){
        case "doneUsers" :
          console.log(this.declare.doneUsers)
          this.filterSymbol(this.declare.doneUsers)
          break;
        default:
          console.log("default")
      }
    },
    changeRadio(i,value){
      let that =this
      console.log("--->",i,value)
      if(i.title==="项目密级" && value==2){
        this.$error({
        title: '警告',
        content: h => <div style="color:blue;">涉密项目请线下咨询申报，未经解密的涉密项目不得申报技术进步奖。 咨询方式<b style='color:red'>0551-62850721</b></div>,
        onOk() {
          // 指向公开类型
          that.declare.secretLevel = 1
          console.log('OK,',that.declare.secretLevel);

        },
        onCancel() {
          // 指向公开类型
          that.declare.secretLevel = 1
          console.log('Cancel');
        },
        class: 'test',
      });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.borB {
  border-bottom: 1px solid #b8babd;
}
.formBox {
  border-radius: 12px;
  border: 1px solid #b8babd;
  .formItem {
    min-height: 44px;
    .formItemName {
      width: 173px;
      height: 100%;
      line-height: 43px;
      text-align: right;
      border-right: 1px solid #b8babd;
      padding-right: 14px;
      box-sizing: border-box;
      color: #3f4041;
    }
  }
}
</style>